<template>
  <div>
    <h1>我是孙子组件</h1>
    <!-- !渲染SonDemo19传递的props.chide -->
    <div>{{ props.chide2 }}</div>
    <hr />

    <!-- !渲染祖级StuDemo45传递的heshibi -->
    <div>爷爷的传家宝{{ heshibi }}</div>
    <button @click="edit">改变</button>

    <div>爷爷的传家宝{{ foo?.name }}</div>
    <button @click="edit1">改变</button>
  </div>
</template>

<script lang="ts" setup>
import { watchEffect, inject, type Ref, ref } from 'vue';
import { myInjectionKey } from './keys';
/**********************************接受SonDemo19传递的props.chide*************************************/
const props = defineProps<{
  chide2: string;
}>();

watchEffect(() => {
  console.log(props);
});

/**********************************跨层级传递数据*************************************/
// const heshibi = inject('heshibi');

const {heshibi} = inject(myInjectionKey) as {
  heshibi:Ref<string>
}
const edit = () => {
  heshibi.value = 'hello world'
}

const foo = ref(inject<{name:string}>('foo'))
console.log(foo);
const edit1 = () => {
  if(foo.value){
    foo.value.name = '11111111'
  }
}
</script>

<style lang="scss"></style>
